/**
 * 波段需求
 */
import * as React from 'react'
import { Card, Button, Form, Row, Col, Select, Divider, Cascader, message, Popconfirm } from 'antd'
import Authentication from '../../../router/Authentication'
import { PageHeaderLayout, StandardTable, HideUpload, ModalMessage } from '../../../components'
import { exportExcel, DELETE_BAND, get } from '../../../service/api'
import '../../../assets/style/TableList.less'
const FormItem = Form.Item
const Option = Select.Option

export interface State {
  formValues: any
  pagination: any
}

@Authentication
class ColorParam extends React.Component<any, State> {
  
  state = {
    pagination: {},
    formValues: {}
  }
  componentDidMount () {
    const { getBaseInfo, getCenterCategory } = this.props
    getBaseInfo({ type: 'colourcnt' })
    getCenterCategory()
    this.search({}, {})
  }

  handleFormReset = () => {
    const { form } = this.props
    form.resetFields()
    this.setState({
      formValues: {}
    })
    this.search({}, {})
  }
  /**
   * 点击查询按钮
   */
  handleSearch = (e: any) => {
    e.preventDefault()
    const { form, data: { pagination } } = this.props
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      Object.assign(fieldsValue,{pageIndex: pagination.current})
      Object.assign(fieldsValue,{pageSize: pagination.pageSize})
      this.setState({
        formValues: fieldsValue,
        pagination,
      })
      this.search({
        ...fieldsValue
      }, pagination)
    })
  }
  /**
   * 调用查询方法
   */
  search (param: any , pageInfo: any) {
    const { list } = this.props
    const { pagination, formValues } = this.state
    list(param||formValues, pageInfo||pagination)
  }
  renderSimpleForm() {
    const { form, centerCategorys, baseInfo } = this.props
    const { getFieldDecorator } = form
    getFieldDecorator('v_dlid', { initialValue: [] })
    getFieldDecorator('v_xlid', { initialValue: [] })
    const changeCateGorys = (e: string []) => {
      let v_dlid = e[0]
      let v_xlid = ''
      if (e.length>1) v_xlid = e[1]
      form.setFieldsValue({
        v_dlid,
        v_xlid
      })
    }
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="分类">
            {getFieldDecorator('fgid')(
              <Cascader options={centerCategorys} onChange = {changeCateGorys} changeOnSelect placeholder="请选择分类"/>
            )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="颜色名称">
              {getFieldDecorator('v_para1')(
                <Select placeholder="请选择颜色名称">
                  {baseInfo.map( (info: any, index: number) => (<Option key={index} value={info.dtvalue}>{info.dtname}</Option>))}
                </Select>)}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className="submitButtons">
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    )
  }
  /**
   * 筛选或者更改分页
   */
  handleStandardTableChange = (pagination: any, filtersArg: any, sorter: any) => {
    const { formValues } = this.state
    let params: any = formValues
    params = {
      ...params,
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
    }
    this.setState({
      formValues: params,
      pagination,
    })
    this.search(params, pagination)
  }
  //编辑
  handleInfo = (row: any) => {
    const { record } = this.props
    record(row)
    this.props.history.push({ pathname: '/ssffaawer/yscs/edit' })
  }
  handleAdd = () => {
    const { clear } = this.props
    clear()
    this.props.history.push({ pathname: '/ssffaawer/yscs/edit' })
  }
  handleDelete = (id: string) => {
    get(DELETE_BAND, { id }).then((res: any) => {
      if (res.code == '1') {
        message.success('操作成功！')
        this.search({}, {})
      }else {
        message.error(res.errMsg)
      }
    })
  }
  render () {
    const { loading, data } = this.props
    const columns: any [] = [
      { title: '风格', dataIndex: 'fgtext' },
      { title: '品类', dataIndex: 'pltext' },
      { title: '颜色名称', dataIndex: 'colourname' },
      { title: '款基准数量', dataIndex: 'baseqty' },
      { title: '编辑日期', dataIndex: 'editdate' },
      { title: '操作',
        render: (row: any) => (
          <React.Fragment>
            <a onClick={ () => this.handleInfo(row)}>编辑</a>
            <Divider type="vertical" />
            <Popconfirm
              title="确认删除该条记录吗？"
              okText="确认" 
              cancelText="取消"
              onConfirm={() => this.handleDelete(row.ID)}>
              <a>删除</a>
            </Popconfirm>
          </React.Fragment>
        ),
      },
    ]
    return (
      <PageHeaderLayout
        title="">
        <Card bordered={false}>
          <div className="tableList">
            <div className="tableListForm">{this.renderSimpleForm()}</div>
            <div className="tableListOperator">
              <Button icon="plus" type="primary" onClick = {this.handleAdd}>
                添加
              </Button>
              <HideUpload 
                ref="MyTSingleUpdaload" 
                url="/Scm/Dict/UploadColourImport" 
                fileType={"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"} 
                title="导入" 
                onChange={(result: any)=>{
                  if(result.code<=0){
                    ModalMessage.error(result.errMsg)
                    return
                  }
                }}
              />
              <Button icon="anticon anticon-download" type="primary" onClick = {() => exportExcel('/Scm/Dict/ExportColour')}>
                下载模板
              </Button>
            </div>
            <StandardTable
              rowKey = "ID"
              select = {false}
              loading={loading}
              data={data}
              columns={columns}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}

export default Form.create()(ColorParam)